<template>
  <div class="bodybox">
    <quitLogin @exitCilck="exitCilck" />
    <img src="@/assets/images/two/KH-Banner.png"
         class="bgimg"
         v-if="rouData == '开黑手机' ">
    <img src="@/assets/images/two/PZ-Banner.png"
         class="bgimg"
         v-else>
    <!-- 商品区 -->
    <phonePage @moreClick="moreClick"
               class="toppage" />
    <!-- 一键登录 -->
    <loginModel :excitingStatus="excitingStatus"
                :loginStatus="loginStatus"
                @shutClick="shutClick"
                @showYzmLogin="showYzmLogin"
                @onekeyLogin="onekeyLogin"
                @loginClick="loginClick" />
  </div>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import phonePage from '@m/commodity/phone.vue'
import quitLogin from '@m/quitLogin/index.vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'
// 格式化日期的
import { formatDate } from '@/utils/common'
import userApi from '@/api/mobile_user/index'
import { Toast, Dialog } from 'vant'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import { useStore } from '@/store'
import loginModel from '@m/onekey-login/index.vue'

export default defineComponent({
  name: 'Login',
  components: { phonePage, quitLogin, loginModel },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const rouData: any = ref(route.query.name)
    const state: any = reactive({
      num: 10,
      excitingStatus: false,
      loginStatus: false
    })
    // 验证码登录
    function showYzmLogin() {
      proxy.loginStatus = true
    }
    // // 一键登录
    function onekeyLogin() {
      console.log('ddddddddd')
      localStorage.removeItem('h5type')

      // proxy.excitingStatus = false
      proxy.excitingStatus = false
      let loading = Toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })
      // 成功
      let success = function successCallback(msgidKey) {
        console.info(msgidKey, '一键登录获取msgidKey成功11')
        let req = {
          msgidKey: msgidKey,
          vChannel: ''
        }
        userApi.setToken(req).then((res) => {
          loading.clear()
          if (res.status == 'msg00004') {
            Toast(res.myMsg || '一键登录失败，请使用验证码登录')
            proxy.excitingStatus = true
            proxy.loginStatus = true
          } else {
            console.log(res.phone, '本地保存', res.token)
            // localStorage.setItem('h5phone', res.phone)
            // localStorage.setItem('h5token', res.token)
            Storage.set(MOBILE_TOKEN, res.token, 30 * 60)
            Storage.set(MOBILE_USER, res, 30 * 60)
            localStorage.setItem('h5phone', res.phone)
            localStorage.setItem('h5type', res.type)
            state.quitphone = res.phone
            store.commit('user/setMobileToken', res.token)
            store.commit('user/setMobileInfo', res)
            Webapph5.pushTrack({ eventmsg: '一键登录统计', eventid: res.phone })
          }
        })
      }
      //  失败
      let fail = function failCallback() {
        loading.clear()
        Toast({
          message: '一键登录失败，请使用验证码登录',
          position: 'top'
        })
        proxy.excitingStatus = true
        proxy.loginStatus = true
      }
      // 执行
      //@ts-ignore
      Login.login(success, fail)
    }
    // // 手机号登录
    function loginClick(phone, yzmCode) {
      if (phone === '' && yzmCode === '') {
        Toast('手机号或验证码不能为空')
      } else {
        let req = {
          phone: phone,
          smsCode: yzmCode
        }
        userApi.messagelogin(req).then((res) => {
          console.log(res, '验证码登录dddddddd')
          if (res.userInfo.phone) {
            Toast('登录成功')
            proxy.excitingStatus = false
            // localStorage.setItem('h5phone', res.phone)
            // localStorage.setItem('h5token', res.token)
            Storage.set(MOBILE_TOKEN, res.userInfo.token, 30 * 60)
            Storage.set(MOBILE_USER, res.userInfo, 30 * 60)
            localStorage.setItem('h5phone', res.userInfo.phone)
            localStorage.setItem('h5type', res.userInfo.type)
            store.commit('user/setMobileToken', res.userInfo.token)
            store.commit('user/setMobileInfo', res.userInfo)
            state.quitphone = res.phone
            Webapph5.pushTrack({ eventmsg: '验证码登录', eventid: res.userInfo.phone })
          } else {
            Toast(res.retMsg + '请重新尝试' || '登录失败请重新尝试')
          }
        })
      }
    }

    function goParticulars() {
      console.log('跳转')
      router.push({
        name: 'particulars',
        params: {
          id: '123',
          name: 'nick'
        }
      })
    }
    function moreClick(data) {
      console.log(data, 'sdsdsd')
    }
    function exitCilck() {
      Storage.remove(MOBILE_TOKEN)
      router.push({
        name: 'weChatActivity'
      })
    }
    onMounted(() => {
      console.log(route.query.name, 'dddddddd')
      window.scroll(0, 0)
      if (!Storage.get(MOBILE_TOKEN)) {
        proxy.excitingStatus = true // 记得改dui
        // proxy.excitingStatus = false
      }
    })

    return {
      ...toRefs(state),
      rouData,
      goParticulars,
      showYzmLogin,
      loginClick,
      onekeyLogin,
      moreClick,
      exitCilck
    }
  }
})
</script>

<style lang="scss" scoped>
.bodybox {
  background: #6b0609;
  .bgimg {
    width: 375px;
  }
  .toppage {
    position: relative;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #6b0609;
  }
}
</style>
